<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html>
<head>

    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <%@include file="../my_js_css/cssInclude.jsp" %>
    <meta charset="UTF-8">
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>

</head>
<body>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.4&key=a9cc973368bc35f8eae77052967ebcb1&callback=loadMap"></script>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="inner-content">
            <!-- header-starts -->
            <div class="header-section">
                <!--menu-right-->
                <div class="top_menu" style="height: 80px; text-align: center;">
                    <span style="display: inline-block; line-height: 80px; font-size: 30px; font-weight: 600; color: #fff">
                         智慧旅游
                    </span>
                    <a style=" float: right; color: #fff; margin: 26px 23px 0 0; font-size: 19px;" class="tooltips" href="/Tourism">
                        <i class="lnr lnr-power-switch"></i>
                    </a>
                    <div class="clearfix"></div>
                </div>
                <!--//menu-right-->
                <div class="clearfix"></div>
            </div>
            <!-- //header-ends -->
            <!--outter-wp-->
            <div class="outter-wp">
                <!--sub-heard-part-->
                <div class="sub-heard-part">
                    <ol class="breadcrumb m-b-0">
                        <li><a href="index.html">上报事件</a></li>

                    </ol>
                </div>
                <!--//sub-heard-part-->
                <div class="graph-visual tables-main">
                    <div class="graph clearfix">
                        <div class="col-sm-6 ">
                            <form class="form-horizontal" action="${ctx}/work/eventadd" method="post">
                                <div class="form-group">
                                    <label for="focusedinput" class="col-sm-3 control-label"
                                           style="margin-top: 0;">事件标题</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control1" placeholder="" name="event_title"
                                               required="required">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="focusedinput" class="col-sm-3 control-label"
                                           style="margin-top: 0;">发生位置</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control1" placeholder="" name="event_address"
                                               required="required">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label"></div>
                                    <label for="focusedinput" class="col-sm-1 control-label"
                                           style="margin-top: 0;">经度</label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control1" placeholder="" name="lng" id="lng"
                                               required="required">
                                    </div>
                                    <label for="focusedinput" class="col-sm-1 control-label"
                                           style="margin-top: 0;">纬度</label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control1" placeholder="" name="lat" id="lat"
                                               required="required">
                                    </div>

                                </div>
                                <div class="form-group">
                                    <label for="focusedinput" class="col-sm-3 control-label"
                                           style="margin-top: 0;">所属网格</label>
                                    <div class="col-sm-6">
                                        <select class="form-control1" placeholder="" name="grid_id"
                                                required="required">
                                            <option value="">请选择</option>
                                            <c:forEach items="${grids}" var="g">
                                                <option value="${g.grid_id}">${g.grid_name}</option>
                                            </c:forEach>
                                        </select>
                                        <%--<input type="text" class="form-control1" placeholder="" name="grid_id"--%>
                                               <%--required="required">--%>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="focusedinput" class="col-sm-3 control-label"
                                           style="margin-top: 0;">联系方式</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control1" id="focusedinput" name="phone"
                                               placeholder="" required="required">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="focusedinput" class="col-sm-3 control-label"
                                           style="margin-top: 0;">事件详情</label>
                                    <div class="col-md-6 form-group1 ">
                                        <textarea name="event_content" required></textarea>
                                    </div>
                                </div>
                                <div class="form-group  ">
                                    <div class="col-sm-11" style="text-align: center;">
                                        <button type="submit" class="btn blue" onclick="add()"
                                                style="  padding: 8px 14px; font-size: 15px;">上报
                                        </button>
                                        <button type="button" class="btn blue"
                                                style="  padding: 8px 14px; font-size: 15px;">返回
                                        </button>
                                    </div>
                                </div>

                            </form>

                        </div>
                        <div class="col-md-6 clearfix">
                            <div id="container" class="form-control" style="height:600px; position: inherit;">
                            </div>
                        </div>
                    </div>

                </div>
                <!--//graph-visual-->

            </div>
            <!--//outer-wp-->
            <!--footer section start-->

        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
    <div class="sidebar-menu">
        <header class="logo">
            <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a>
            <a href="${ctx}/sys/index "> <span id="logo"> <h1>智慧旅游</h1></span> </a>
        </header>
        <div class="down">
            <a   style="display: inline-block;">
                <img style="width: 58px; border: 3px solid #ddd; margin-top: -30px" src="http://202.97.207.34:8199/user.png">
            </a>
            <a    style="display: inline-block; margin-left: 10px; text-align: left;">
                <span style="font-size: 15px; display: inline-block; margin-left: 9px;" class=" name-caret">${emp_name}</span><br />
                <p style="display: inline-block;" id="clock3"></p>
            </a>
        </div>
        <div style="border-top:1px solid rgba(69, 74, 84, 0.7)"></div>

        <div class="menu">
            <ul id="menu">
                <li><a href="${ctx}/work/addEvent"><i class="lnr lnr-pencil"></i> <span>上报事件</span></a></li>
                <li><a href="${ctx}/work/zworkIndex"><i class="fa fa-file-text-o"></i> <span>组任务</span></a></li>
                <li><a href="${ctx}/work/gworkIndex"><i class="fa fa-file-text-o"></i> <span>个人任务</span></a></li>
                <li><a href="${ctx}/work/insertEvent"><i class="lnr lnr-pencil"></i> <span>提交事件流</span></a></li>
                <li><a href="${ctx}/work/queryAllEvent"><i class="lnr lnr-pencil"></i> <span>查询事件</span></a></li>
                <li id="menu-academico">
                    <a><i class="fa fa-table"></i> <span> 系统管理</span> <span class="fa fa-angle-right"
                                                                            style="float: right"></span></a>
                    <ul id="menu-academico-sub">
                        <li><a href="${ctx}/emp/empIndex">人员管理</a></li>
                        <li><a href="${ctx}/org/orgIndex">部门管理</a></li>
                        <li><a href="${ctx}/role/roleIndex">角色管理</a></li>
                        <li><a href="${ctx}/sys/grid">网格管理</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<%@include file="../my_js_css/jsInclude.jsp" %>
<script src="http://webapi.amap.com/maps?v=1.4.4&key=a9cc973368bc35f8eae77052967ebcb1&callback=loadMap"></script>
<script>
    function add() {
        alert("上报成功")
    }
    var map;
    function loadMap(gridId) {
        mapObj = new AMap.Map('container', {
            resizeEnable: true,
            center: [130.975966,45.300046],
            zoom: 13
        });
        AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件
    }

    function geocoder() {
        var MGeocoder;
        //加载地理编码插件
        mapObj.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'],
            function () {
                mapObj.addControl(new AMap.ToolBar());


                mapObj.addControl(new AMap.Scale());


                mapObj.addControl(new AMap.OverView({isOpen: true}));
                mapObj.addControl(new AMap.MapType());
                mapObj.addControl(new AMap.Geolocation());
            });
        mapObj.plugin(["AMap.Geocoder"], function () {
            MGeocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
            });
            //返回地理编码结果
            AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
            //逆地理编码
            MGeocoder.getAddress(lnglatXY);
        });
        //加点
        var marker = new AMap.Marker({
            map: mapObj,

            icon: new AMap.Icon({
                image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",
                size: new AMap.Size(58, 30),
                imageOffset: new AMap.Pixel(-0, -0)
            }),
            position: lnglatXY,
            offset: new AMap.Pixel(-5, -30)
        });
        // mapObj.setFitView();
    }

    //回调函数


    function geocoder_CallBack(data) {
        console.log("ddd");
        var address;
        //返回地址描述
        address = data.regeocode.formattedAddress;
    }
    //鼠标点击，获取经纬度坐标
    function getLnglat(e) {
        mapObj.clearMap();
        var x = e.lnglat.getLng();
        var y = e.lnglat.getLat();

        lnglatXY = new AMap.LngLat(x, y);
        geocoder();
        $("#lng").val(x)
        $("#lat").val(y)
    }
</script>
</body>
</html>